import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


// 通过Echarts.init(DOM容器的DOM对象)方法初始化一个Echarts实例
let myChart1 = echarts.init(document.getElementById('mychart1'));
let myChart2 = echarts.init(document.getElementById('mychart2'));


// 使用setOption方法生成图表
myChart1.setOption({   // 图表的配置项和数据

    title: {//配置图表的标题
        id:'1', //通用属性,可以给title起了一个名字,在其他组件使用这个图表组件/更新数据的的时候可以通过这个id找到它,默认不设置
        show:true,//通用属性,显示这个标题,默认为true
        text: 'title组件', //显示的主标题文本
        // link:"https://www.baidu.com", //配置标题的链接
        // target:'blank',//链接新窗口打开, blank新窗口,self本窗口
        textStyle:{//通用属性,标题设置文本样式
            color:'black',//设置标题颜色
            fontStyle:'oblique', //字体风格,normal默认,italic:斜体(字形可能重新设计,线条流畅),oblique:机械斜体(角度倾斜,不重新设计)
            fontWeight:'bolder',//主标题的文字字体粗细,默认为bolder,粗体
            fontFamily:'SimSun, sans-serif',//字体家族,默认Arial, Helvetica, sans-serif
            fontSize:50,//字体大小,默认12
            lineHeight:20,//行高,默认1,一般不指定
            width:200,//宽度,默认auto,一般不指定,不定义rich属性不能指定
            height:50,//高度,默认auto,一般不指定,不定义rich属性不能指定
            textBorderColor:'green',//文本边框颜色,需要设置textBorderWidth属性才能生效
            textBorderWidth:1,//文本边框宽度,需要设置textBorderColor属性才能生效
            textBorderStyle:'dashed',//文本边框样式,实线,虚线,点线,双线
            textBorderDashOffset:1,//文本边框虚线偏移量,需要textBorderStyle属性为虚线才能生效
            textShadowColor:'red',//文本阴影颜色,需要设置textShadowBlur属性才能生效
            textShadowBlur:10,//文本阴影模糊,需要设置textShadowColor属性才能生效
            textShadowOffsetX:10,//文本阴影偏移量X,需要设置textShadowBlur属性才能生效
            textShadowOffsetY:10,//文本阴影偏移量Y,需要设置textShadowBlur属性才能生效
            overflow:'none',//文本溢出处理,默认不处理,设置了width属性后才生效,可选值:truncate:截断,break:换行,break-all:单词换行
            ellipsis:'...'//在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
     
        },
        subtext: 'subtext组件',
        sublink: 'https://www.baidu.com',
        subtarget: 'blank',
        subtextStyle: {
            color: 'blue',
            fontStyle: 'italic',
            fontWeight: 'bold',
            fontFamily: 'SimSun, sans-serif',
            //...其他属性,与textStyle属性相同
        },
        textAlign:'auto',//整体文本的水平对齐,包括text和subtext (注意:这里控制的是整个标题块在可用空间内的位置,不是单纯的文本对齐)
        verticalAlign:'auto',//整体文本的垂直对齐,包括text和subtext
        triggerEvent:true,//是否触发事件,默认不触发,设置为true后,标题可以触发事件
        padding:[10,30,30,20],//标题(包含父标题)距离容器的边距,默认不设置,可选值:top,bottom,left,right,top-left,top-right,bottom-left,bottom-right
        itemGap:0,//标题和副标题之间的间距,默认10
        zlevel:0,//标题的层级,默认0,越大越靠上, 不同 zlevel 会生成独立 Canvas,在数据变动的时候如果标题没变,这个canvas就不会更新,单独拿出来,可以优化性能
        z: 2,//标题的z轴,默认0,越大越靠上,相对于zlevel层级优先级更低,不会新创建Canvas(同一个canvas中的层级)
        // left:0,//标题的左边界,默认auto,可选值:left,center,right
        top:65,//标题的上边界,默认auto,可选值:top,center,bottom
        // right:10,//标题的右边界,默认auto,可选值:left,center,right
        // bottom:10,//标题的下边界,默认auto,可选值:top,center,bottom
        backgroundColor:'yellow',//设置标题背景颜色
        borderColor:'green',//容器边框颜色
        borderWidth:2,//容器边框宽度
        borderRadius:10,//容器边框弧度
        shadowBlur:12,//容器阴影的模糊大小,此配置项生效的前提是，设置了 show: true 以及值不为 transparent 的背景色 backgroundColor
        shadowColor:'blue',//如果shadowBlur搭配这个属性有颜色的话,可以设置transparent 的背景色 backgroundColor
        shadowOffsetX:10,
        shadowOffsetY:10,
    },
    grid:{ //可以把 grid 想象成一张“画布上的矩形框”,所有折线、柱状、散点等需要直角坐标系的图形都必须在这个框里完成绘制
        show:true
    },
});


//绑定事件
myChart1.off('click') //防止重复注册事件
myChart1.on('click',params =>{ //绑定全局的点击事件
    console.log('click',params)
    //过滤出title组件的事件
    if(params.componentType === 'title'){
         //title 没有单独事件，但只要 triggerEvent:true + 监听全局 click 并判断 componentType==='title'，就能实现任意点击交互
         //副标题被点击也算
        console.log('标题被点击了')
        alert('标题被点击了')
    }
})